import QtQuick 2.4
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
import "../Utils.js" as U

Rectangle {
    property bool show: true
    property int parentWidth: required
    property var playInfo: ({
            id: 0,
            name: "",
            artists: "",
            album: "",
            coverImage: "",
            allTime: "00:00"
        })
    property var playList: null
    property int index: 0
    property var theme: p_theme.currentTheme()
    property double fontSize: 9
    visible: show
    width: parentWidth
    height: 80
    color: getColor()
    radius: 10
    function getColor() {
        if (model.id === playContent.currentPlayerInfo.id) {
            return Qt.lighter(theme.fontColor, 1.8);
        }
        return Qt.lighter(theme.fontColor, delegateMouseArea.isHover ? 1.7 : 2);
    }
    Behavior on color {
        ColorAnimation {
            duration: 100
        }
    }
    Row {
        height: parent.height
        width: parent.width - 20
        anchors.horizontalCenter: parent.horizontalCenter
        Item {
            width: parent.width * 0.2 - 80
            height: parent.height
            anchors.verticalCenter: parent.verticalCenter
            Text {
                anchors.centerIn: parent
                color: theme.fontColor
                font.pointSize: fontSize
                // width: parent.width * 0.2 - 80
                // anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                font.italic: true
                font.bold: true
                text: "#" + (index + 1)
            }
        }

        Item {
            width: parent.height
            height: parent.height
            Rectangle {
                id: coverImageDom
                width: 64
                height: 64
                anchors.verticalCenter: parent.verticalCenter
                radius: 7
                border.width: 2
                border.color: theme.fontColor
                anchors.leftMargin: 30
                anchors.rightMargin: 30
                RoundedImage {
                    size: 60
                    anchors.centerIn: parent
                    radius: 4
                    source: U.imgUrl(playInfo.coverImage, width, height)
                }
            }
            Item {
                visible: playInfo.vip
                anchors.right: coverImageDom.right
                anchors.top: coverImageDom.top
                anchors.rightMargin: 2
                width: 30 * 1.1
                height: 20 * 1.1
                Rectangle {
                    anchors.centerIn: parent
                    width: 22 * 1.1
                    height: 9 * 1.1
                    color: theme.fontColor
                }

                Image {
                    source: "qrc:/icon/vip.svg"
                    anchors.fill: parent
                    ColorOverlay {
                        anchors.fill: parent
                        source: parent
                        color: theme.backgroundColor
                    }
                }
            }
        }
        Text {
            color: theme.fontColor
            font.pointSize: fontSize
            width: parent.width * 0.25
            anchors.verticalCenter: parent.verticalCenter
            horizontalAlignment: Text.AlignLeft
            elide: Text.ElideRight
            text: playInfo.name
        }

        Text {
            color: theme.fontColor
            font.pointSize: fontSize
            width: parent.width * 0.3
            anchors.verticalCenter: parent.verticalCenter
            horizontalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
            text: playInfo.artists
        }
        Text {
            color: theme.fontColor
            font.pointSize: fontSize
            width: parent.width * 0.25 - 80
            anchors.verticalCenter: parent.verticalCenter
            horizontalAlignment: Text.AlignHCenter
            elide: Text.ElideRight
            text: playInfo.allTime
        }
        Item {
            width: 80
            height: 80
            opacity: if (playInfo.id === playContent.currentPlayerInfo.id || delegateMouseArea.isHover)
                return 1
            else
                return 0
            Behavior on opacity {
                NumberAnimation {}
            }
            ToolTipButton {
                id: playerButton
                anchors.centerIn: parent
                size: 40
                iconSource: playInfo.id === playContent.currentPlayerInfo.id ? "qrc:/icon/playing.svg" : "qrc:/icon/player.svg"
                SequentialAnimation {
                    loops: Animation.Infinite // 使动画无限循环
                    running: playInfo.id === playContent.currentPlayerInfo.id
                    NumberAnimation {
                        target: playerButton
                        property: "scale"
                        from: 1
                        to: 1.2
                        duration: 1000
                    }
                    NumberAnimation {
                        target: playerButton
                        property: "scale"
                        from: 1.2
                        to: 1
                        duration: 1000
                    }
                }
            }
        }
    }

    HoverMouseArea {
        id: delegateMouseArea
        cursorShape: Qt.PointingHandCursor
        onClicked: {
            playContent.requestPlay(playInfo, playList);
            // print(JSON.stringify(playInfo))
            // print(playInfo)
        }
    }
    MouseArea {
        id: delegateMouseArea2
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onClicked: {
            menu.popup();
        }
    }

    Menu {
        id: menu
        MenuItem {
            text: "播放"
            onTriggered: {
                playContent.requestPlay(playInfo, playList);
            }
        }
        MenuItem {
            text: "下一首播放"
            onTriggered: {
                playContent.pushNextPlayer(playInfo);
                toast.show("设置下一首播放成功");
            }
        }
        MenuItem {
            text: playContent.hasCollect(playInfo.id) ? "取消收藏" : "收藏"
            onTriggered: {
                if (playContent.hasCollect(playInfo.id)) {
                    playContent.unCollectMusic(playInfo.id);
                    toast.show("取消收藏成功");
                } else {
                    playContent.collectMusic(playInfo);
                    toast.show("收藏成功");
                }
            }
        }
        MenuItem {
            text: "下载"
            onTriggered: {
                toast.show("敬请期待");
            }
        }
    }
}
